'use client'
import React, {useEffect} from 'react'
import Login from "@/app/components/LoginModal";
import YSJFNav from "@/app/components/Header/YSJFNav";
import SideNavigation from './SideNavigation';
import UseScrollPosition from "@/app/Hooks/useScrollPosition";
import UseClientWH from "@/app/Hooks/useClientWH";

const YSJFHeader = () => {

  const {scrollPosition} = UseScrollPosition()
  const {clientHeight} = UseClientWH()

  const [isShow, setIsShow] = React.useState<boolean>(false);
  const [isNav, setIsNav] = React.useState<boolean>(false);
  const [isTrue, setIsTrue] = React.useState<boolean>(false);

  const bgWhite = 'fixed w-dvw overflow-hidden z-50 bg-white md:px-4  xs:px-2   sm:px-1.5  lg:px-20  pl-[70px] pr-[70px] flex justify-between items-center h-[70px]  '
  const lucency = 'fixed w-dvw overflow-hidden z-50   md:px-4  xs:px-2   sm:px-1.5  lg:px-20  pl-[70px] pr-[70px] flex justify-between items-center h-[70px] '

  const sideFn = (flag: string) => {
    if (flag == 'close') {
      setIsNav(!isNav)
    }
    if (flag == 'login') {
      setIsNav(!isNav)
      setIsShow(!isShow)
    }
  }

  useEffect(() => {
    setIsTrue(clientHeight - scrollPosition > 70)
  }, [scrollPosition, clientHeight])

  return <div
    className={isTrue ? lucency : bgWhite}>
    <div className="flex ">
      {isTrue ? <img className="w-[7.5rem] h-[2.25rem] mr-[70px]" src="/images/banner-login.png" alt=""/> :
        <img className="w-[7.5rem] h-[2.25rem] mr-[70px]" src="/images/banner-login1.png" alt=""/>}
      <YSJFNav isTrue={isTrue}/>
    </div>
    <div className=" text-gray-300">

      <svg onClick={() => setIsShow(!isShow)} className="lg:flex hidden size-6 rounded-full"
           xmlns="http://www.w3.org/2000/svg"
           fill="none" viewBox="0 0 24 24"
           strokeWidth={1.5} stroke="currentColor"
           style={{color: isTrue ? 'gray' : 'black', background: isTrue ? '#cecece' : '#f4f6f7',}}>
        <path strokeLinecap="round" strokeLinejoin="round"
              d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
      </svg>

      <svg onClick={() => setIsNav(!isNav)} className="lg:hidden size-6" xmlns="http://www.w3.org/2000/svg" fill="none"
           viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round"
              d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/>
      </svg>
    </div>

    {isShow && <Login closeModal={() => setIsShow(!isShow)}/>}

    {isNav && <SideNavigation onClose={(flag: string) => sideFn(flag)}/>}
    {/* {document.body && createPortal(, document.body)}*/}

  </div>
}
export default YSJFHeader